<template>
  <div>
    <div id="join">
      <section class="sec-01">
        <div class="back-holder">
          <div class="back-box" @click="goBack">
            <img src="../../assets/img/wx/mode/back.png"/>
          </div>
        </div>
        <div class="sec-01__title-box">
          <head-line :txt="sec01Text" :txtStyle="sec01TextStyle"></head-line>
        </div>
        <div class="sec-01__img">
          <img src="../../assets/img/wx/cooperate/join/join-img1.png" alt="">
        </div>
        <div class="sec-01__content">
          <div class="sec-01__content_header">
            <p>加盟条件</p>
            <div class="line"></div>
          </div>
          <div class="sec-01__content_title1" flex="dir:top main:center">
            <p class="p1">无需加盟费</p>
            <div class="sec-01__content_title1_item">
              <div class="dot"></div>
              <div class="left">
                <p>具有独立法人资格，营业执照经营范围应有汽车服</p>
                <p>务项目</p>
              </div>
            </div>
            <div class="sec-01__content_title1_item">
              <div class="dot"></div>
              <div class="left">
                <p>有合法固定的经营场所，配备电脑、传真机、打印</p>
                <p>机、扫描枪等设备</p>
              </div>
            </div>
            <div class="sec-01__content_title1_item">
              <div class="dot"></div>
              <div class="left">
                <p>有职业道德，有开拓意识和服务理念，有团队合作</p>
                <p>精神，有责任心</p>
              </div>

            </div>
            <div class="sec-01__content_title1_item">
              <div class="dot"></div>
              <div class="left">
                <p> 认同公司发展理念，必须遵守公司营销管理规定，</p>
                <p>有强烈的创业欲望，愿意和公司建立事业伙伴关系</p>
              </div>
            </div>
            <div class="sec-01__content_title1_item">
              <div class="dot"></div>
              <div class="left">
                <p> 解当地新能源物流车市场情况，如市场容量、竞争</p>
                <p>对手、客户分布等</p>
              </div>
            </div>
            <div class="sec-01__content_title1_item">
              <div class="dot"></div>
              <p>承诺不泄漏任何有关商业机密及资料</p>
            </div>
          </div>
          <div class="sec-01__content_box" flex="dir:top">
            <p class="header">司机加入</p>
            <div class="form">
              <span>姓名:</span> <input type="text" autofocus="autofocus">
            </div>
            <div class="form">
              <span>性别:</span> <input type="text">
            </div>
            <div class="form">
              <span>电话:</span> <input type="text">
            </div>
            <div class="form">
              <span>出生年月:</span> <input type="text">
            </div>
            <div class="form">
              <span>所在城市:</span> <input type="text">
            </div>
            <button>提交</button>
          </div>
          <div class="sec-01__content_box" flex="dir:top">
            <p class="header">网点加入</p>
            <div class="form">
              <span>公司名称:</span> <input type="text">
            </div>
            <div class="form">
              <span>公司电话:</span> <input type="text">
            </div>
            <div class="form">
              <span>公司地址:</span> <input type="text">
            </div>
            <div class="form">
              <span>公司营业执照上传:</span> <input type="text">
            </div>
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-error="handleAvatarError"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <button>提交</button>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import headLine from "./components/headline"

  export default {
    data() {
      return {
        sec01Text: "我要加盟",
        sec01TextStyle: {
          "font-size": "20px",
          "color": "#ffffff"
        },
        imageUrl: ''
      }
    },
    mounted: function () {

    },
    components: {
      headLine,
    },
    methods: {
      goBack() {
        this.$router.back()
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      handleAvatarError(err,file,fileList){
        alert("图片上传失败");
      },
      beforeAvatarUpload(file) {
        console.log(file)
        const isJPG = file.type === 'image/jpeg'||'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('图片格式不正确');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>
<style scoped lang="scss">


  #join {
    width: 100vw;
    background: #000000;
    .sec-01 {
      color: #ffffff;
      position: relative;
      overflow: hidden;
      .back-holder {
        padding: 23px 14px;
        .back-box {
          width: 103px;
          height: 103px;
          padding: 23px 23px;
          img {
            width: 59px;
            height: 59px;
          }
        }

      }
      .sec-01__title-box {
        margin: 10% 0;
      }
      .sec-01__img {
        width: 680px;
        margin: auto;
        img {
          width: 100%;
        }
      }
      .sec-01__content {
        .sec-01__content_header {
          width: 680px;
          margin: 23px auto;
          p {
            font-size: 40px;
          }
          .line {
            width: 80px;
            height: 3px;
            background: rgb(10, 131, 101);
            margin-top: 12px;
          }
        }
        .sec-01__content_title1 {
          width: 680px;
          margin: 0px auto;
          .p1 {
            font-size: 33px;
            padding: 23px 0;
          }
          .sec-01__content_title1_item {
            padding: 12px 0;
            .dot {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background: rgb(11, 152, 112);
              margin-right: 28px;
              margin-top: 2%;
              float: left;
            }
            .left {
              float: left;
            }
            p {
              font-size: 28px;
              padding: 1% 0;
            }
          }
        }
        .sec-01__content_box {
          width: 680px;
          margin: 47px auto;
          .header {
            padding:23px 0;
            font-size: 36px;
          }
          .form {
            margin: 23px 0;
            span {
              font-size: 26px;
              margin-right: 11px;
            }
            input {
              background: black;
              color: rgb(11, 156, 112);
              font-size: 30px;

            }
          }
          .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
          }
          .avatar-uploader-icon {
            font-size: 66px;
            color: rgb(11,152,116);
            width:122px;
            height: 122px;
            line-height: 122px;
            text-align: center;
            border:1px solid rgb(11,152,116);
            margin: 23px 0;
          }
          .avatar {
            width: 52px;
            height: 52px;
            display: block;
          }
          button {
            width: 122px;
            height: 54px;
            background: rgb(11, 156, 112);
            color: white;
            font-size: 30px;
            margin: 11px 0;
            border-radius: 8%;
          }
        }
      }
    }
  }
</style>
